<style>
.image-input:hover {
    background-color: #F7F7F7;
}

.image-input > img {
    transition: all .3s ease;
}

.image-input {
    position: relative;
    border: 1px solid #cccccc;
    border-radius: 3px;
    padding: 5px 10px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0;
	-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0;
	-ms-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0;
	-o-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0;
	box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0;
}

.image-input-mask-container {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 5px;
    left: 10px;
    height: 200px;
    width: 250px;
}

.image-input-mask {
    background: url('../assets/loading.gif') no-repeat;
    width: 56px;
    height: 56px;
    display: block;
}

</style>

<template>
    <div class="image-input">
        <img :src="model.value" :style="{width: image_width + 'px',height:image_height + 'px'}" @load="load" />
        <div v-el:mask  v-if="!loaded" class="image-input-mask-container" ><span class="image-input-mask"></span></div>
    </div>
</template>

<script>
    export default {
        props: ['model'],
        data () { return { loaded: false, image_width: 250, image_height: 200, mask_height: 0 }},
        ready () {
            if (!this.model.value) {
                if (['image/png', 'image/jpeg', 'image/gif'].indexOf(this.model.file.type) < 0) return;

                var self = this,
                    reader = new FileReader();

                reader.onload = function(event) {
                    self.model.value = event.target.result
                };
                reader.readAsDataURL(this.model.file);
            }
        },
        events: {
            preview_picture: function(preview) {
                this.image_width = preview? 50: 250;
            }
        },
        methods: {
            load (e) {
                console.log('IMAGE LOADING', e);
                this.loaded = true;
                console.log(this);
            },
        },
    }
</script>
